<template>
  <div :style="'width:' + width">
    <div class="form-item-label-top">
      <div style="display: flex; align-items: center">
        <span style="color: red; margin-right: 5px" v-if="required">*</span>
        <div style="flex: 1">{{ name }}</div>
        <div style="margin-left: 60px; color: red">{{ data.displayName }}</div>
      </div>
    </div>
    <el-table :data="data.surveys" stripe border highlight-current-row show-summary>
      <el-table-column label="序号" width="60">
        <template slot-scope="scope">
          {{ scope.row.DSSV_No }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="80">
        <template slot-scope="scope">
          {{ scope.row.DSSV_Name }}
        </template>
      </el-table-column>
      <el-table-column label="村组" prop="CSCG_Fee">
        <template slot-scope="scope">
          {{ scope.row.DSSV_Village }}
        </template>
      </el-table-column>
      <el-table-column label="身份证">
        <template slot-scope="scope">
          {{ scope.row.DSSV_IDCard }}
        </template>
      </el-table-column>
      <el-table-column label="日期" width="100">
        <template slot-scope="scope">
          {{ scope.row.DSSV_Date==null?'': scope.row.DSSV_Date.split(' ')[0]}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      data: {
        surveys: [],
        displayName: '',
      },
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '农户'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '农户'
        }
      }
      return '农户'
    },
  },
  methods: {
    input() {
      this.data.displayName = `共${this.data.surveys.length}户`
      this.$emit('input', JSON.stringify(this.data))
      this.$emit('display', this.data.displayName)
    },
  },
  mounted: function () {
    if (this.value) {
      this.data = JSON.parse(this.value)
      this.input()
    }
    this.input()
  },
}
</script>
<style scoped>
.el-form-item {
  margin: 10px !important;
}
</style>